<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    
    <script src="./vue.js"></script>
</head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
}

i,
em {
  font-style: normal;
}

html {
  font-size: 75px;
  background-color: #cdcdcd;
}

body {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container header.content_hd {
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.666667rem;
  padding: 0 0.133333rem;
  background-color: #323232;
}
.container header.content_hd h1.header_logo {
  font-size: 0.32rem;
  color: #ddd;
  font-weight: 400;
}
.container header.content_hd input.header_search {
  width: 2.933333rem;
  height: 0.346667rem;
  margin-left: auto;
  padding-left: 0.133333rem;
  font-size: 0.16rem;
  border-radius: 0.08rem;
  box-shadow: 0.04rem 0.04rem 0.133333rem rgba(0, 0, 0, 0.2) inset;
}
.container .content_bd .list_hd {
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.4rem;
  margin: 0.266667rem 0;
  padding: 0 0.133333rem;
}
.container .content_bd .list_hd h2 {
  flex: 90%;
  font-size: 0.32rem;
}
.container .content_bd .list_hd i {
  padding: 0.026667rem 0.066667rem;
  text-align: center;
  border-radius: 0.666667rem;
  font-size: 0.186667rem;
  background: #e6e6fa;
  color: #666;
  font-weight: 700;
}
.container .content_bd .list_bd {
  display: flex;
  flex-direction: column;
}
.container .content_bd .list_bd ul.list {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 0 0.133333rem;
}
.container .content_bd .list_bd ul.list li {
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.426667rem;
  padding: 0 0.2rem;
  margin-bottom: 0.133333rem;
  border-radius: 0.08rem;
  border-left: 0.066667rem solid #629A9C;
  background-color: #fff;
}
.container .content_bd .list_bd ul.list li .check {
  width: 0.32rem;
  height: 0.32rem;
}
.container .content_bd .list_bd ul.list li > span {
  flex: 1;
  margin-left: 0.133333rem;
  font-size: 0.213333rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container .content_bd .list_bd ul.list li > a {
  position: relative;
  width: 0.32rem;
  height: 0.293333rem;
  border: 0.08rem double #fff;
  border-radius: 0.133333rem;
  background: #ccc;
}
.container .done li {
  opacity: 0.5;
}
.container footer.ft {
  margin-top: 60vh;
  text-align: center;
  font-size: 0.16rem;
  color: #666;
}
</style>

<body>
    <div id="app" class="container">
        <header class="content_hd">
            <h1 class="header_logo">ToDoList</h1>
            <input type="search" class="header_search" @keydown.enter="add" v-model.trim="inputValue" autofocus
                placeholder="添加ToDo">
        </header>
        <section class="content_bd">
            <div class="list_hd">
                <h2>正在进行</h2>
                <i class="count">{{doingList.length}}</i>
            </div>
            <div class="list_bd">
                <ul class="list">
                    <li v-for="(item,index) in doingList" :key="index">
                        <input type="checkbox" class="check" @change="item.isDone = !item.isDone"
                            :checked="item.isDone">
                        <span>{{item.content}}</span>
                        <a href="#" @click="deleteById(item.id)"></a>
                    </li>
                </ul>
            </div>
        </section>
        <section class="content_bd done">
            <div class="list_hd">
                <h2>已完成</h2>
                <i class="count">{{doneList.length}}</i>
            </div>
            <div class="list_bd">
                <ul class="list">
                    <li v-for="(item,index) in doneList" :key="index">
                        <input type="checkbox" class="check" @change="item.isDone = !item.isDone"
                            :checked="item.isDone">
                        <span>{{item.content}}</span>
                        <a href="#" @click="deleteById(item.id)"></a>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</body>

<script>
    const app = new Vue({
        data: {
            //事项总列表
            toDoList: [],
            //输入框事项
            inputValue: ''
        },
        methods: {
            add() {
                //非空判断
                if (this.inputValue.length === 0) {
                    alert('待办事项不能为空!')
                    return
                }
                //添加事项
                this.toDoList.push({
                    content: this.inputValue,
                    isDone: false, //刚添加的状态为待办事项
                    id: this.toDoList.length //每添加一个用当前数组的长度作为id
                })
                //清空输入框
                this.inputValue = ''
            },
            //删除事项
            deleteById(id) {
                //根据id删除事项
                this.toDoList.splice(id, 1)
                //删除后数组索引会前移,重排索引
                this.toDoList.forEach((item, index) => item.id = index)
            },
            //页面关闭时持久化数据到本地存储
            beforeunloadHandler() {
                localStorage.setItem('toDoList', JSON.stringify(this.toDoList))
            }
        },
        //通过过滤todolist的数据筛选出已经做好的列表和待办的列表渲染页面
        computed: {
            //待办
            doingList() {
                return this.toDoList.filter(item => !item.isDone)
            },
            //已完成
            doneList() {
                return this.toDoList.filter(item => item.isDone)
            },
        },
        //实例data创建后从本地存储加载数据
        created() {
            this.toDoList = JSON.parse(localStorage.getItem('toDoList')) || []
        },
        //挂载完成后注册页面关闭事件
        mounted() {
            window.addEventListener('beforeunload', this.beforeunloadHandler)
        },
        //实例销毁时移除页面关闭事件
        destroyed() {
            window.removeEventListener('beforeunload', this.beforeunloadHandler)
        },
    }).$mount('#app');
</script>

</html>